<template>
  <div class="page">
    <div class="top">
      <mynav title="首页" :left-arrow="leftArrow"></mynav>
    </div>
    <div class="nav">
      <van-tabs v-model="active" @click="channiel">
        <van-tab
          v-for="(item, index) in userChannel.channels"
          :key="index"
          :title="item.name"
          :name="item.id"
        >
          <div
            class="content"
            v-for="(item, index) in results"
            :key="index"
            @click="topageDetail(item.art_id)"
          >
            <div class="c1">
              <div class="f1">
                {{ item.title }}
              </div>
              <div class="f2" v-if="item.cover.type === 1">
                <img :src="item.cover.images" alt="" />
              </div>
            </div>
            <div class="c2" v-if="item.cover.type > 1">
              <img
                v-for="(item1, index1) in item.cover"
                :key="index1"
                :src="item1.images"
                alt=""
              />
            </div>
            <div class="c3">
              <div class="active">
                {{ item.is_top === 0 ? '置顶' : '不置顶' }}
              </div>
              <div>{{ item.aut_name }}</div>
              <div>{{ item.comm_count }}评论</div>
              <div>{{ item.pubdate | filterTime }}</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { userChannels, articles } from '@/api/page.js'
import mynav from '@/components/mynav.vue'
export default {
  components: { mynav },
  name: 'page',
  data () {
    return {
      active: '',
      userChannel: '',
      results: '',
      leftArrow: false
    }
  },
  methods: {
    async channiel () {
      const res = await articles({
        channel_id: this.active,
        timestamp: Date.now(),
        with_top: 0
      })

      this.results = res.data.results
    },
    topageDetail (id) {
      // this.$router.push(
      //   '/home/pageDetail?id=' + id + '?path=' + this.$route.fullPath
      // )
      // query传参
      this.$router.push({
        path: '/home/pageDetail',
        query: {
          id: id,
          path: this.$route.fullPath
        }
      })
    }
  },
  // 获取用户频道
  mounted () {
    userChannels().then(res => {
      this.userChannel = res.data
      // 给active赋值
      this.active = res.data.channels[0].id
      // 调用channiel方法
      this.channiel()
    })
  }
}
</script>

<style lang="less" scoped>
.page {
  .top {
    height: 40px;
    background-color: #3296fa;
    padding: 6px 40px;
    .search {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      padding: 5px;
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 20px;
      .txt {
        .icon {
          display: inline-block;
          font-size: 18px;
        }
        font-family: MicrosoftYaHei;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #ffffff;
      }
    }
  }
  .nav {
    ::v-deep .van-tabs__wrap {
      border-bottom: 1px solid #fafbfb;
    }
    ::v-deep .van-tab {
      padding: 0 20px;
      border-right: 1px solid #fafbfb;
    }
    ::v-deep .van-tabs__line {
      background-color: #3296fa;
    }
    .content {
      padding: @p15;
      // display: flex;
      // align-content: space-between;
      // flex-wrap: wrap;
      .c1 {
        display: flex;
        justify-content: space-between;
        font-family: ArialMT;
        font-size: 16px;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 1px;
        margin-top: @p15;
        color: #3a3a3a;
        margin-bottom: 10px;
        .f1 {
          flex: 1;
        }
      }
      img {
        display: inline-block;
        width: 115px;
        height: 73px;
      }
      .c3 {
        margin-top: 10px;
        display: flex;
        justify-content: left;
        font-family: ArialMT;
        font-size: 12px;
        font-weight: normal;
        letter-spacing: 1px;
        color: #b4b4b4;
        div {
          padding-right: 10px;
        }
        .active {
          color: #e22829;
        }
      }
    }
  }
}
</style>
